Skip to content

✨ Created fallback version of app icon#1197

Merged
mariush2 merged 8 commits into
mainfrom
feat/fallback-app-icons
Jan 7, 2026
Merged

✨ Created fallback version of app icon#1197
mariush2 merged 8 commits into
mainfrom
feat/fallback-app-icons

Conversation

@mariush2
Copy link
Copy Markdown
Contributor

@mariush2 mariush2 commented Jan 6, 2026

Azure DevOps links

User story


  • Needs to be tested locally by reviewer

Description

Application icon now creates fallback based on name

Copilot AI review requested due to automatic review settings January 6, 2026 07:34
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR replaces the static fallback icon with a dynamic fallback that generates application icons based on the name. When an unknown application name is provided, the system now creates an acronym from the name and displays it as text with programmatically selected background shapes.

  • Replaced static fallback icon with dynamic name-based fallback
  • Added utility functions to generate acronyms and select shape configurations
  • Refactored ApplicationIconBase to support both icon-based and text-based rendering

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
src/molecules/ApplicationIcon/Icons/Fallback.tsx Deleted the old static fallback icon component
src/molecules/ApplicationIcon/Fallback.tsx Created new fallback component that generates icons based on application name
src/molecules/ApplicationIcon/ApplicationIconCollection.tsx Removed the static fallback icon data export
src/molecules/ApplicationIcon/ApplicationIconBase.tsx Refactored to support both IconData and name-based rendering with Typography
src/molecules/ApplicationIcon/ApplicationIcon.utils.ts Added utility functions for acronym generation and shape selection
src/molecules/ApplicationIcon/ApplicationIcon.tsx Updated Fallback import path to new location
src/molecules/ApplicationIcon/ApplicationIcon.stories.tsx Added Fallback story showcasing multiple random application names
Comments suppressed due to low confidence (1)

src/molecules/ApplicationIcon/ApplicationIconCollection.tsx:178

  • The tests at lines 135-144 and 155-161 import and reference fallback from ApplicationIconCollection, but this export has been removed in this PR. These tests will fail because fallback is no longer available. The tests need to be updated to reflect the new fallback behavior that generates acronyms from names instead of using a static icon.
export const bravos: IconDataWithColor[] = [
  {
    name: 'bravos1',
    prefix: 'bravos',
    height: '24',
    width: '24',
    color: '#99C6C9',

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/molecules/ApplicationIcon/ApplicationIcon.utils.ts
Comment thread src/molecules/ApplicationIcon/ApplicationIcon.utils.ts Outdated
Comment thread src/molecules/ApplicationIcon/ApplicationIconBase.tsx Outdated
Comment thread src/molecules/ApplicationIcon/ApplicationIconBase.tsx Outdated
Comment thread src/molecules/ApplicationIcon/ApplicationIcon.utils.ts
Comment thread src/molecules/ApplicationIcon/ApplicationIcon.utils.ts
Comment thread src/molecules/ApplicationIcon/ApplicationIcon.utils.ts Outdated
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings January 6, 2026 07:40
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jan 6, 2026

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 100% (🎯 100%) 16614 / 16614
🔵 Statements 100% (🎯 100%) 16614 / 16614
🔵 Functions 100% (🎯 100%) 1200 / 1200
🔵 Branches 100% (🎯 100%) 4132 / 4132
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/molecules/ApplicationIcon/ApplicationIcon.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/ApplicationIcon.utils.ts 100% 100% 100% 100%
src/molecules/ApplicationIcon/ApplicationIconCollection.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Fallback.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/ApplicationIconBase/ApplicationIconContent.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/ApplicationIconNew/ApplicationIconNew.constants.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/ApplicationIconNew/ApplicationIconNew.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/ApplicationIconNew/ApplicationIconNewData/ApplicationIconNewCollection.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/Acquire.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/Adca.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/Bravos.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/Dasha.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/FluxMaps.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/ForecastFormatter.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/FourDInsight.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/InPress.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/JsCalendar.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/JsEmbark.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/LoggingQualification.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/Orca.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/Premo.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/Pwex.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/Recap.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/Sam.tsx 100% 100% 100% 100%
src/molecules/ApplicationIcon/Icons/SubsurfacePortal.tsx 100% 100% 100% 100%
Generated in workflow #2032 for commit c6ae345 by the Vitest Coverage Report Action

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.

Comments suppressed due to low confidence (1)

src/molecules/ApplicationIcon/ApplicationIconCollection.tsx:178

  • The fallback export has been removed from ApplicationIconCollection, but it's still being imported in ApplicationIcon.test.tsx (line 9) and used in test assertions (lines 142, 160). This will cause test failures. The tests need to be updated to work with the new name-based fallback approach that no longer uses a static icon.
export const bravos: IconDataWithColor[] = [
  {
    name: 'bravos1',
    prefix: 'bravos',
    height: '24',
    width: '24',
    color: '#99C6C9',

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/molecules/ApplicationIcon/ApplicationIcon.utils.ts
Comment thread src/molecules/ApplicationIcon/ApplicationIconBase.tsx Outdated
Comment thread src/molecules/ApplicationIcon/ApplicationIcon.utils.ts
Copilot AI review requested due to automatic review settings January 6, 2026 12:25
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.

Comments suppressed due to low confidence (1)

src/molecules/ApplicationIcon/ApplicationIconCollection.tsx:179

  • Removing the fallback export from ApplicationIconCollection will break existing tests. The ApplicationIcon.test.tsx file (lines 9, 142, 160) imports and uses fallback.svgPathData to verify fallback rendering behavior.

Since the fallback icon is now dynamically generated based on the application name rather than using a fixed icon, the tests need to be updated to either verify the text-based acronym rendering or use a different approach to test the fallback behavior.

export const bravos: IconDataWithColor[] = [
  {
    name: 'bravos1',
    prefix: 'bravos',
    height: '24',
    width: '24',
    color: '#99C6C9',
    svgPathData:

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/molecules/ApplicationIcon/ApplicationIcon.stories.tsx
Comment thread src/molecules/ApplicationIcon/ApplicationIconBase.tsx Outdated
Comment thread src/molecules/ApplicationIcon/Fallback.tsx
Comment thread src/molecules/ApplicationIcon/ApplicationIconBase/ApplicationIconBase.tsx Outdated
Comment thread src/molecules/ApplicationIcon/ApplicationIconBase.tsx
Comment thread src/molecules/ApplicationIcon/Fallback.tsx
Copilot AI review requested due to automatic review settings January 6, 2026 12:37
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 25 out of 26 changed files in this pull request and generated 4 comments.

Files not reviewed (1)
  • .idea/vcs.xml: Language not supported
Comments suppressed due to low confidence (2)

src/molecules/ApplicationIcon/ApplicationIconBase/ApplicationIconBase.tsx:113

  • The iconData prop is now optional (since it can be either iconData or name), but ApplicationIconBase.tsx doesn't validate that at least one of these props is provided. If neither iconData nor name is passed, the component will render an empty container. Consider adding runtime validation or updating the type definition to enforce that one of these props must be provided.
    .idea/vcs.xml:12
  • The .idea/vcs.xml file is an IDE-specific configuration file that is typically included in .gitignore. This file should not be committed to the repository as it's specific to IntelliJ IDEA/WebStorm and can vary between developers. Consider removing this file from the PR and adding .idea/ to your .gitignore if it's not already there.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/molecules/ApplicationIcon/ApplicationIcon.stories.tsx
Comment thread src/molecules/ApplicationIcon/Icons/Sam.tsx
Comment thread src/molecules/ApplicationIcon/Fallback.tsx
Copilot AI review requested due to automatic review settings January 6, 2026 13:15
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 34 out of 35 changed files in this pull request and generated 9 comments.

Files not reviewed (1)
  • .idea/vcs.xml: Language not supported
Comments suppressed due to low confidence (2)

src/molecules/ApplicationIcon/ApplicationIconBase/ApplicationIconBase.tsx:105

  • ApplicationIconBaseProps extends Required, which makes size, iconOnly, withHover, and grayScale required. However, the component destructuring provides default values (size = 48, grayScale = false) and the FallbackProps interface extends AppIconProps (not Required), which makes these properties optional. This type mismatch could cause TypeScript errors when passing Fallback props to ApplicationIconBase. Consider making ApplicationIconBaseProps extend AppIconProps instead of Required, since the component already handles defaults.
    src/molecules/ApplicationIcon/ApplicationIconBase/ApplicationIconBase.tsx:70
  • The hover styles only apply to SVG and div elements, but fallback icons now render a Typography component (p element) instead of an SVG. The hover animation won't apply to the text acronym, creating an inconsistent user experience between custom icons and fallback icons when withHover is true. Consider adding hover styles for the paragraph element or wrapping it in a way that the existing styles apply.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/organisms/TopBar/ApplicationDrawer/ApplicationDrawer.test.tsx
Comment thread src/organisms/TopBar/TopBar.test.tsx
Comment thread src/molecules/ApplicationIcon/ApplicationIcon.stories.tsx
Comment thread .idea/vcs.xml
Comment thread src/organisms/TopBar/TopBar.jsdom.test.tsx
@mariush2 mariush2 marked this pull request as ready for review January 6, 2026 13:23
@mariush2 mariush2 requested a review from a team as a code owner January 6, 2026 13:23
@mariush2 mariush2 requested a review from aslakihle January 6, 2026 13:23
Copy link
Copy Markdown
Contributor

@aslakihle aslakihle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😎

@mariush2 mariush2 merged commit 2b97ac9 into main Jan 7, 2026
17 checks passed
@mariush2 mariush2 deleted the feat/fallback-app-icons branch January 7, 2026 06:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants